<template>
  <div>
    <span>Prize number: {{ prizeNumber }}</span>
    <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++)" :disabled="rolling || prizeNumber === 8">Add</button>
    <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--)" :disabled="rolling || prizeNumber === 2">Remove</button>
     <div class="wheel-wrapper">
      <div class="wheel-pointer" @click="onClickRotate"></div>
      <div
        class="wheel-bg"
        :class="{freeze: freeze}"
        :style="`transform: rotate(${wheelDeg}deg)`"
      >


        <!--<div class="prize-list other">-->
          <!--<ul class="ulOne" >-->
            <!--<li v-for="(item,index) in arrOne"  :style="{ transform: item.deg, backgroundColor: item.backgroundColor }"></li>-->
          <!--</ul>-->
          <!--<ul class="ulTwo" >-->
            <!--<li v-for="(item,index) in arrTwo" :style="{ transform: item.deg, backgroundColor: item.backgroundColor }"></li>-->
            <!--<li v-if="prizeListOrigin.length==3" style="border:none;z-index:4; transform: rotate(329deg)"></li>-->
          <!--</ul>-->
        <!--</div>-->


        <div class="prize-list">
          <div
            class="prize-item-wrapper"
            v-for="(item, index) in prizeList"
            :key="index"

          >
            <div
              class="prize-item"
              :style="{transform: `rotate(${(360 / prizeList.length) * index}deg)`}"
            >
              <div class="prize-name">
                {{ item.name }}
              </div>
              <div class="prize-icon">
                <img :src="item.icon">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      data() {
        return {
          freeze: false,
          rolling: false,
          wheelDeg: 0,
          prizeNumber: 8,
          prizeListOrigin: [
            {
              icon: "https://picsum.photos/40?random=1",
              name: "$10000"
            },
            {
              icon: "https://picsum.photos/40?random=6",
              name: "没中哦"
            },
            {
              icon: "https://picsum.photos/40?random=2",
              name: "$500"
            },
            {
              icon: "https://picsum.photos/40?random=3",
              name: "$100"
            },
            {
              icon: "https://picsum.photos/40?random=6",
              name: "没中哦"
            },
            {
              icon: "https://picsum.photos/40?random=4",
              name: "$50"
            },
//            {
//              icon: "https://picsum.photos/40?random=5",
//              name: "$10"
//            },
//            {
//              icon: "https://picsum.photos/40?random=6",
//              name: "没中哦"
//            }
          ],

          arrOne: [],
          arrTwo: [],
        }
      },
      computed: {
        prizeList() {
          this.setSan();
//          $.each(this.prizeListOrigin,function(index, value){
//            console.log(index, value);
//            value.backgroundColor = index % 2 == 0 ? 'skyblue' : '#fff'
//          })
          return this.prizeListOrigin.slice(0, this.prizeNumber)
        }
      },
      methods: {
        setSan() {
          console.log('00');
          let _this = this;
          _this.arrOne = [];
          _this.arrTwo = [];

          for(let i = 0; i < _this.prizeListOrigin.length; i++) {
            let item = {
//              value: _this.prizeListOrigin[i].name,
              zIndex: Number(i) + 1,
              deg: "rotate(" + Math.floor(360 * 100 / _this.prizeListOrigin.length) / 100 * (0.5 + Number(i)) + "deg)",
              degnum: i,
            }
//            _this.arrOne.push(item)
            if(i < _this.prizeListOrigin.length / 2) {
              _this.arrOne.push(item)
            } else {
              _this.arrTwo.push(item)
            }
          }
        },
        onClickRotate() {
          if (this.rolling) {
            return;
          }
          this.rolling = true;
          const {wheelDeg, prizeList} = this;
          const random = Math.floor(Math.random() * (prizeList.length ));
//          const random = 2;
//          console.log(random);

          this.wheelDeg = wheelDeg - wheelDeg % 360 + 6 * 360 + (330 - 360 / prizeList.length * random);
          console.log('this.wheelDeg--', this.wheelDeg);
          setTimeout(() => {
            this.rolling = false;
            console.log("Result：" + prizeList[random].name);
          }, 5500);
        }
      },
      watch: {
        prizeNumber() {
          this.freeze = true
          this.wheelDeg = 0

          setTimeout(() => {
            this.freeze = false
          }, 0)
        }
      }
  }
</script>

<style scoped lang="scss">
  html {
    background: #DD7C7D;
  }

  .wheel-wrapper {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background: url("../../assets/img/turnplate-bg.png") no-repeat;*/
    background: url("../../assets/img/bg_turntable1.png") no-repeat;
    background-size: 100%;
  }

  .wheel-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../../assets/img/turnplate-pointer.png") no-repeat;
    width: 133px;
    height: 179px;
    border-radius: 1000px;
    z-index: 10;
  }
  .wheel-bg {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    overflow: hidden;
    transition: transform 5s ease-in-out;

  &.freeze {
     transition: none;
     background: red;
   }
  }

  .prize-list {
    background: url("../../assets/img/bg_turntable2.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    /*position: relative;*/
    position: absolute;
    text-align: center;
    transform:rotate(30deg);

    ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      li {
        position: absolute;
        top: 0px;
        left: 50%;
        width: 50%;
        height: 50%;
        transform-origin: 0 100%;
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;
        border-left: 1px solid #000;
      }

      /*li:last-child{*/
        /*clip: rect(0px,67px,87px,0px);*/
      /*}*/
    }
    .ulOne {
      clip: rect(0, 300px, 300px, 0);
    }
    .ulTwo {
      clip: rect(0, 300px, 300px, 0);
    }

    .prize-item-wrapper {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 150px;
      z-index:9999;
    }

    .prize-item {
      width: 100%;
      height: 100%;
      transform-origin: bottom;

      .prize-name {
        padding: 26px 0 4px 0;
      }

      .prize-icon {}
    }
  }

  .other{
    width: 84%;
    height: 84%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translatey(-50%) translateX(-50%);
  }


</style>
